<template>
  <div class="tab_bar_container">
    <div class="tab_bar_wrapper">
      <div
        v-for="(item,index) in items"
        :key="index"
        class="tab_bar_item_container"
        @click="onClick(index)"
      >
        <div class="tab_bar_item_icon">
          <img :src="selectIndex===index?item.icon_active:item.icon" />
        </div>
        <div
          :class="selectIndex===index?'tab_bar_item_title_active':'tab_bar_item_title'"
        >{{item.title}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tabItems: Array
  },
  data() {
    return {
      items: this.tabItems,
      selectIndex: -1
    };
  },
  methods: {
    onClick(index) {
      this.selectIndex = index;
      localStorage.selectIndex = JSON.stringify(this.selectIndex);
      var currentItem = this.items[index];
      this.$router.push(currentItem.path);
      return;
    }
  },
  created() {
    if (this.selectIndex) {
      this.selectIndex = JSON.parse(localStorage.selectIndex);
    }
    console.log(this.selectIndex)
  }
};
</script>

<style scoped>
.tab_bar_container {
  width: 100%;
  height: 64px;
  background-color: white;
  position: fixed;
  left: 0px;
  bottom: 0px;
}

.tab_bar_wrapper {
  width: 100%;
  height: 64px;
  display: inline-flex;
  justify-content: space-around;
  align-items: center;
}

.tab_bar_item_container {
  width: 20%;
  height: 64px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab_bar_item_icon {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab_bar_item_icon img {
  width: 40%;
}

.tab_bar_item_title {
  font-size: 0.25rem;
  color: black;
}

.tab_bar_item_title_active {
  color: red;
  font-size: 0.25rem;
}
</style>